<template>
  <div class="password-input-container">
    <el-input
      :type="showPassword ? 'text' : 'password'"
      v-model="inputValue"
      :placeholder="placeholder"
      :class="inputClass"
      @input="handleInput"
      @blur="handleBlur"
      @focus="handleFocus"
    >
      <template #suffix>
        <el-icon 
          class="password-toggle-icon" 
          @click="togglePassword"
          :class="{ 'active': showPassword }"
        >
          <el-icon-view v-if="showPassword"></el-icon-view>
          <el-icon-hide v-else></el-icon-hide>
        </el-icon>
      </template>
    </el-input>
  </div>
</template>

<script>
import { View as ElIconView, Hide as ElIconHide } from '@element-plus/icons-vue'

export default {
  name: 'PasswordInput',
  components: {
    ElIconView,
    ElIconHide
  },
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入密码'
    },
    inputClass: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue', 'input', 'blur', 'focus'],
  data() {
    return {
      showPassword: false
    }
  },
  computed: {
    inputValue: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  },
  methods: {
    togglePassword() {
      this.showPassword = !this.showPassword
    },
    handleInput(value) {
      this.$emit('input', value)
    },
    handleBlur(event) {
      this.$emit('blur', event)
    },
    handleFocus(event) {
      this.$emit('focus', event)
    }
  }
}
</script>

<style scoped>
.password-input-container {
  position: relative;
}

.password-toggle-icon {
  cursor: pointer;
  color: #c0c4cc;
  transition: color 0.3s;
  font-size: 16px;
  padding: 0 8px;
}

.password-toggle-icon:hover {
  color: #409eff;
}

.password-toggle-icon.active {
  color: #409eff;
}

.password-toggle-icon:active {
  transform: scale(0.95);
}
</style> 